【前言】
不知道大家有沒有看過 Youtube 上面一些 5~12 小時的 Coding 教學影片。這是一件頗好笑的事情，以前我都想到底誰會把這種影片看完來學一個語言，結果我這個禮拜就做了不只兩次這件事情，同一個語言還看了不只一部。

其中我花了兩天的時間把前端三巨頭的教學影片精熟，大概就是看著做一次。還好這幾個語言並沒有像 C/C++ 那樣非常著重在記憶體配置上，所以基本上就是看懂這個語言的架構與寫法，一些基礎的內容會了之後，剩下都是需要的時候再瘋狂 Google 了。

【教學資源 - HTML + CSS】
今天推薦我使用的 HTML + CSS 教學影片與相關資源。

The Net Ninja 是一個關於程式語言教學的 Youtube 頻道，他的口條跟語速是我在相關 Youtube 頻道裡面最喜歡的，而且他的簡報還有相關圖例非常簡潔有力。

HTML & CSS Crash Course Tutorial

除此之外，他還會在每個主題的一開始做一個大致的介紹，之後用程式碼實作，最後再有一個結語來複習這堂課講的內容。由於教學資源都是開源的，所以也可以在頻道下方下載。

The Net Ninja 跟很多教學頻道不同，他使用最簡潔的編輯器，最唾手可得的系統進行教學。很多時候即便照著其他頻道實作還是會出現各式各樣的 Error，甚至完全不同的結果。更不用說很多頻道喜歡在完全看不懂的編輯器上編輯，在複雜的命令列或門檻很高的系統上做編譯，這對背景知識嚴重不足的初學者們是很大的負擔。

我之後學習其他相關語言以及前端實作時，發現所有我遇見的 HTML + CSS 架構的語法內容，在 The Net Ninja 的這個教學裡面都有學到過。在最後一篇他還有介紹學完課程之後的延伸學習，有 CSS Animations、CSS Grid、CSS Flexbox、Modern JavaScript、Styling HTML Forms 等。五星推推，推薦給初學者或有興趣的人！

【課後練習】
直到現在大概可以說自己學會前端兩巨頭了，那就直接來實作一個網頁看看吧！今天先把該放上去的 資料放上去，並且簡單的 CSS 排版還有設計。

HTML：
首先是導入字型：

<!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">

建構表格以及基本資料、並且放上圖片：

<form class="box" method="post">
    <h1>Dino Login</h1>
    <img src="2.png" width="200" height="200">
    <input type="text" name="" placeholder="My Dino ID">
    <input type="password" name="" placeholder="My Ethereum Address">
    <input type="submit" name="" placeholder="Login">
  
</form>

目前的成果：

CSS：
配色設計：
雖然我正在使用的 Visual Code 裡面已經有顏色可以直接挑選和看見顏色結果了，但還是推薦三個挑色的網站。有的會直接推薦隨機一組配色給大家，有的可以直接點顏色然後複製 RGB 碼，五星推推！

Coolors - The super fast color schemes generator!
Flat UI Colors 2 - 14 Color Palettes, 280 colors ?

基本排版：

:root {
    --clr-:#66CCCC;
    --clr-bg: #000;
  }
  
  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--clr-bg);
    font-family: "Balsamiq Sans", cursive;
    color: var(--clr);
    padding-right: 10rem;
  }
}

輸入格的設計：

.box input[type = "text"], .box input[type = "password"], .box input[type = "submit"]{
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border:2px solid #3498db;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 24px;
  }

最後再稍微把 Submit 格修改一下顏色之後就成功做出了一個登入介面！

【小結】
某些時候我都覺得 Youtube 頻道教得比學校或 Coursera 上的好，因為語速及口條順暢、教學的過程合理、資源開放、實作的部分簡潔有力。我自己的經驗是學校的教學通常不會有程式碼實作，都只是把概念或者簡報講過（唸過）。這樣效果其實非常有限，還遠不如我自己買一本工具書來查，畢竟沒有人可以完全記住一個語言的語法吧！如果沒有直接看見它怎麼用以及實際效果如何，相信很難從純文字和 PPT 吸收。

不過相對的使用 Youtube 學習也有一些缺點，像是沒辦法對不是很理解的部分提問、也沒辦法詢問更延伸的內容，以及沒有題目可以練習。

【參考資料】
這邊設計參考了以下這個大神的模板，我除了修改了一些版面設計、字型跟顏色，還增加一張未來 NFT 的產品圖。這張估計不會發行，是超級限量版！之後的前端實作我會使用自己的想法跟特效，來做為最後 Project 的成果，這邊都是測試跟學習喔！

Animated Login Form Using Only HTML & CSS